<div class="container">

  <!-- Main hero unit for a primary marketing message or call to action -->
  <div class="hero-unit">
    <img id="azure-logo" width="200" src="/img/azure-logo.png">
    <h1 id="page-title">Service Explorer</h1>
  </div>

  <div class="row">
    <% if (error) { %>
    <div class="alert alert-error">
      <strong><%= error %></strong>
    </div>
    <% } %>

    <% if (roles) { %>
    <h2>Roles</h2>
    <% for (var role in roles) { %>
      <div class="role">
        <h2><%= roles[role].name %></h2>
        <div id="properties">
          <% if (roles[role].imageUrl) { %>
          <img class="roleImg" src="<%= roles[role].imageUrl %>">
            <% } else { %>
          <img class="roleImg" src="/img/azure-role.png">
          <% } %>

          <% if (roles[role].description) { %>
          <p class="indexDescription"><%= roles[role].description %></p>
          <% } else { %>
          <p class="indexDescription">No description.</p>
          <% } %>
        </div>
        <p><a class="btn btnDetails" href="/role/<%= roles[role].name %>">View details &raquo;</a></p>
      </div>
    <% } %>
    <% } %>
  </div>
</div> <!-- /container -->